<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telphone=no, email=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="320">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="stylesheet" type="text/css" href="/admin/css/binding.css"/>
    <script src="/admin/js/rem.js"></script>
</head>
<body>

<div class="head_img">
    <p>您当前未绑定</p>
    <img src="/admin/img/bd.png"/>
</div>
<div class="dv1">
    <form style="width: 100%;height: 100%"; background-color:red>
        {{csrf_field()}}
        <div  class="dv2">
            <!--   <font class="fytt" color="black">手机号码：</font>   -->
            <div class="dv5"><img src="/admin/img/tele.png" alt="" /></div>
            <input  class="fyttp" type="text" id="phone" name="phone" placeholder="  请输入手机号码" />
        </div>
        <div class="dv3">
            <!--  <font class="fyty" color="black">验&nbsp证&nbsp 码：</font>  -->
            <div class="dv6"><img src="/admin/img/yz.png" alt="" /></div>
            <input type="text" id="checkCode" name="checkCode"  placeholder="  请输入验证码" size="6"/>
        </div>
        <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()"/>
    </form>
</div>
<div class="dv4">
    <p class="bang" id="sub">绑定</p>
</div>
</body>
<script src="/admin/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    /*-------------------------------------------*/
    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    var code = "1234567890"; //验证码
    var vc = '';
    var codeLength = code.length;//验证码长度
    function sendMessage(){
        curCount = count;
        var phone=$("#phone").val();//手机号码
        if(phone != ""){
            //产生验证码
            for (var i = 0; i < 4; i++) {
                var num = Math.floor(Math.random() * codeLength);
                vc += code.substr(num,1)
            }
            //向后台发送处理数据
            $.ajax({
                type: "POST", //用POST方式传输
                url: '/verify/index', //目标地址
                async:false,
                data:{
                    "_token": $("input[name=_token]").val(),
                    'phone' : phone,
                    'vc' : vc
                },
                dataType: "json", //数据格式:JSON
                success: function (data){
                    if(data.status == '-1'){
                        alert(data.msg)
                    }else{
                        //设置button效果，开始计时
                        $("#btnSendCode").attr("disabled", "true");
                        $("#btnSendCode").val(curCount + "s");
                        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                    }
                }
            });
        }else{
            alert("手机号码不能为空！");
        }
    }
    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#btnSendCode").removeAttr("disabled");//启用按钮
            $("#btnSendCode").val("重新发送验证码");
            vc = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
        }
        else {
            curCount--;
            $("#btnSendCode").val(curCount + "s");
        }
    }
    $('#sub').click(function () {
        var phone = $("#phone").val();//手机号码
        var t_preg = /^1(3|4|5|7|8)\d{9}$/;
        var checkCode = $("#checkCode").val();//验证码
        if(t_preg.test(phone)){
            if(checkCode == vc&&checkCode != ''){
                $.ajax({
                    type: "POST", //用POST方式传输
                    url: '/admin/binding/bm', //目标地址
                    async:false,
                    data:{
                        "_token": $("input[name=_token]").val(),
                        'phone' : phone,
                    },
                    dataType: "json", //数据格式:JSON
                    success: function (data){
                        if(data.status == '1'){
                            location.href = '/admin/binding/apply';
                        }
                    }
                })
            }else{
                alert('验证码不正确')
            }
        }else{
            alert('请输入正确的手机号')
        }
    })
</script>
</html>